<template>
	<view class="wrapper">
		<u-navbar :is-back="showBack" :border-bottom="true" :customBack='leftClick'>申请发票</u-navbar>
		<view class="width">
			<u-form label-width="250" :model="form"  ref="uForm">
				<view class="column">
					<u-form-item required :border-bottom="false" prop="ticket_header_type" label="发票抬头类型">
						<u-radio-group
						    v-model="form.ticket_header_type"
						    placement="column"
						  >
						  <view class="radio-view" v-for="(item, index) in headerType" :key="index">
						  	<u-radio active-color="#217bfb" label-size="25" shape="circle" :name="item.val">
						  		{{ item.name }}
						  	</u-radio>
						  </view>
						  </u-radio-group>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="ticket_type" label="发票类型">
						<u-input
							v-model="form.ticket_type"
							:disabled='true'
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="ticket_header" :label="form.ticket_header_type == 2 ? '抬头(公司名称)' : '姓名（抬头）'">
						<u-input
							v-model="form.ticket_header"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="address" label="联系地址">
						<u-input
							type='textarea'
							v-model="form.address"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="company_person" label="法人代表" v-if='form.ticket_header_type == 2'>
						<u-input
							v-model="form.company_person"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="ticket_receiver_email" label="发票接收邮箱">
						<u-input
							v-model="form.ticket_receiver_email"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="company_number" label="统一社会信用代码" v-if='form.ticket_header_type == 2'>
						<u-input
							v-model="form.company_number"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="company_phone" label="联系电话" v-if='form.ticket_header_type == 2'>
						<u-input
							v-model="form.company_phone"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="company_bank" label="开户银行" v-if='form.ticket_header_type == 2'>
						<u-input
							v-model="form.company_bank"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
					<u-form-item required :border-bottom="false" prop="company_bank_no" label="银行账户" v-if='form.ticket_header_type == 2'>
						<u-input
							v-model="form.company_bank_no"
							:custom-style="defaultInputStyle"
						/>
					</u-form-item>
				</view>
			</u-form>
			<view class="btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
import { ticketAdd } from "@/api/ticket";
export default {
	data() {
		return {
			showBack:true,
			defaultInputStyle: {
				background: "#f7f7f7",
				padding: "0 20rpx",
				"border-radius": "10rpx"
			},
			form: {
				ticket_header_type:1,
				ticket_header:'',
				ticket_type:'专票',
				company_phone:'',
				company_bank:'',
				company_bank_no:'',
				company_number:'',
				ticket_receiver_email:'',
				company_person:'',
				address:'',
			},
			headerType:[
				{ name:'个人', val:1},
				{ name:'企业', val:2},
			],
			rules: {
				// 验证规则
				ticket_receiver_email: [{ required: true, message: "请填写邮箱" }],
				ticket_header: [{ required: true, message: "请填写抬头" }],
				company_phone: [{ required: true, message: "请填写联系电话" }],
				company_bank: [{ required: true, message: "请填写开户银行" }],
				company_bank_no: [{ required: true, message: "请填写开户银行账号" }],
				company_number: [{ required: true, message: "请填写统一社会信用代码" }],
				company_person: [{ required: true, message: "请填写法人" }],
				address: [{ required: true, message: "请填写联系地址" }],
			},
			id:''
		};
	},
	onLoad(options) {
		this.id = options.id
	},
	mounted() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		//跳转到首页
		leftClick(){
			uni.navigateTo({
				url: "/pages/mine/ticket/index"
			});
		},
		submit() {
			let that = this
			this.$refs.uForm.validate(async (valid) => {
				if (valid) {
					const params = { ...this.form };
					params.id = this.id
					ticketAdd(params).then((res) => {
						uni.showToast({
							title: "提交成功",
							icon: "none"
						});
						setTimeout(()=>{
							that.leftClick()
						},2000)
					});
				}
			});
		}
	}
};
</script>
<style>
/* page {
  background: #fff;
} */
</style>
<style lang="scss" scoped>
.wrapper {
	// padding: 50rpx 32rpx 16rpx 32rpx;
}
.column {
	padding: 32rpx;
	margin-bottom: 20rpx;
	background: #fff;
}
.submit {
	color: #fff;
	margin-top: 120rpx;
	background: rgba($light-color, 0.8);
}
.tips {
	color: #999;
	font-size: 24rpx;
	line-height: 1.2;
	margin-top: 10rpx;
}
.btn{
		border-radius: 100px;
		width: 100%;
		margin-top: 20px;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		background: linear-gradient(57.72deg, #197bfb 18.14%, #217bfb 98.44%);
	}
</style>
